<template>
    <div>

        <div class="card" v-for="(item,index) in ALL" :key="index">

            <div class="checkBox">
                <van-checkbox class='checkBoxContent'
                              :value="checkArray[index]"
                              @change="checkSingle(index)">
                </van-checkbox>
            </div>

            <div class="product">
                <van-card
                        @click-thumb="todetail(item.ID)"
                        :tag="index === ALL.length - 1 ? 'New':''"
                        :price="item.TPrice"
                        :origin-price="item.TOrPrice"
                        :title="item.Name"
                        :desc="item.TypeName"
                        :thumb="URL + '/products/' + item.ID +'/BI/' + item.Img"
                >
                    <div slot="bottom">
                        <div class="number">
                            <van-stepper min='0' v-model="item.Mount" @change="stepChange($event,index)"/>
                        </div>
                    </div>
                </van-card>
            </div>

        </div>


        <!--//底部-->
        <div>
            <van-submit-bar
                    :price="allPrice"
                    button-text="提交订单"
                    bind:submit="onClickButton"
                    @submit="toCommit"
            >
                <div class="allcheckBox">
                    <van-checkbox :value="allCheck"
                                  @change="checkAll">全选
                    </van-checkbox>
                </div>
            </van-submit-bar>
        </div>

        <div class="footSpace"></div>

        <van-dialog id="van-dialog"/>


    </div>
</template>


<script>
    import Vue from 'vue';
    import { Dialog } from 'vant';
    import { Checkbox} from 'vant';

    Vue.use(Checkbox);
    Vue.use(Dialog);
    import { Card } from 'vant';

    Vue.use(Card);
    import { SubmitBar } from 'vant';

    Vue.use(SubmitBar);
    import Moment from 'moment';

    export default {
        beforeMount: function () {
            console.log('购物车onshow时orders为：', this.$store.state.orders);
            this.checkArray = [];
            this.ALL = this.$store.state.cart;
            for (let i = 0; i < this.ALL.length; i++) {
                this.checkArray.push(true);
            }
            console.log('this.ALL为：', this.ALL);
        },
        data() {
            return {
                URL: 'http://43.226.148.67:5000/',
                ALL: null,
                checkArray: [],
                allCheck: true,
                imageURL: 'https://img.yzcdn.cn/vant/t-thirt.jpg'
            }
        },
        methods: {
            todetail: function(ID){
                console.log('点击了购物车条目');
                this.$router.push('/pages/details/main?ID=' + ID);
                // wx.navigateTo({
                //     url: '/pages/details/main?ID=' + ID,
                // })
            },
            onChange: function () {
                console.log(this.allCheck);
                this.allCheck = !this.allCheck;
            },
            toCommit: function () {
                console.log('点击了提交订单');
                // console.log(this.$store.state.orders);

                let order = Object;
                order.ID = new Date().getTime();
                order.createTime = Moment(Date.now()).format('YYYY-MM-DD HH:mm:ss');
                order.list = [];
                order.payed = false;
                order.tPrice = this.allPrice;
                order.weID = this.$store.state.weID;
                order.weName = this.$store.state.weName;

                console.log('for 循环之前', this.$store.state.orders);
                // console.log(this.checkArray);
                for (let i = 0; i < this.checkArray.length; i++) {
                    if (this.checkArray[i] === true) {
                        order.list.push(this.ALL[i]);
                    }
                }
                this.$store.dispatch('addToOrder', order);
                this.$store.dispatch('modiAllCart', []);
                this.$router.replace('/pages/pay/main?ID=' + order.ID);
            },
            stepChange: function (event, index) {
                console.log(this.ALL);
                let mount = event;
                this.ALL[index].TPrice = Math.floor(mount * this.ALL[index].TypeSinglePrice * 100) / 100;
                this.ALL[index].TOrPrice = Math.floor(mount * this.ALL[index].TypeOrSinglePrice * 100) / 100;
                this.ALL[index].Mount = mount;
                console.log('------------------------>>>>>>>>>步数改变');
                console.log(event);

                if (mount === 0) {
                    Dialog.confirm({
                        title: '确认删除？',
                        message: '当前商品数量已为 0 , 是否删除此项？'
                    }).then(() => {
                        console.log('点击了确认');
                        this.ALL.splice(index, 1);
                        this.checkArray.splice(index, 1);
                        this.$store.dispatch('modiAllCart', this.ALL);
                    }).catch(() => {
                        console.log('点击了取消');
                        this.$store.dispatch('modiAllCart', this.ALL);
                    });
                }
                this.$store.dispatch('modiAllCart', this.ALL);
            },
            checkSingle: function (index) {
                this.checkArray.splice(index, 1, !this.checkArray[index]);
                if (this.checkArray.indexOf(false) === -1) {
                    this.allCheck = true;
                } else {
                    this.allCheck = false;
                }
            },
            checkAll: function () {
                for (let i = 0; i < this.ALL.length; i++) {
                    this.checkArray[i] = !this.allCheck;
                }
                this.allCheck = !this.allCheck;
            }
        },
        computed: {
            allPrice: function () {
                let all = 0;
                this.ALL.forEach((item, index) => {
                    if (this.checkArray[index] === true) {
                        all += item.TPrice;
                    }
                });
                return all * 100;
            }
        },

    }
</script>

<style scoped>
    .card {
        width: 95%;
        margin: 10px auto;
        border-radius:5px;
        box-shadow:3px 2px 10px #c7c6be;
        overflow: hidden;
        background-color: #fafafa;

    }

    .checkBox {
        width: 25px;
        background-color: #fafafa;
        float: left;
    }

    .checkBoxContent {
        width: 25px;
        height: 25px;
        display: block;
        position: relative;
        top: 30px;
        left: 5px;
    }

    .product {
        width: 90%;
        float: left;
        margin-top: 0;
    }

    .number {
        position: absolute;
        top: 55px;
        right: 0;
        /*background-color: #07c160;*/
    }

    .allcheckBox {
        margin-left: 10px;
    }

    .footSpace {
        width: 100%;
        height: 50px;
        text-align: center;

    }
</style>
